<template>
  <view class="course-page">
    <!-- 导航栏组件 -->
    <NavBar title="练习记录"></NavBar>
    <view class="content" :style="getContentStyle()">
      <scroll-view v-if="list.length" class="course-list" scroll-y="true" :show-scrollbar="false" @scrolltolower="handleScrollToLower">
        <view v-for="(item, index) in list" :key="index" class="list-item" @click="handleGoReport(item)">
          <view class="list-item-card">
            <image class="list-item-card-img" :src="item.videoPoster ? item.videoPoster : '/static/images/me-list-img.png'" mode="aspectFit"></image>
            <view class="list-item-card-score" :class="getTagClass(item)">
              <text class="list-item-card-score-txt">{{ item.comprehensiveScore || 0 }}分</text>
            </view>
            <view class="list-item-card-time">
              <text class="list-item-card-time-txt">{{ formatTime(item.useTime) }}</text>
            </view>
          </view>
          <view class="list-item-content">
            <view class="list-item-name">第{{ item.exerciseNumber || 1 }}次{{ item.exerciseTypeName }}</view>
            <view class="list-item-time">{{ item.finishTime || '--' }}</view>
            <view class="list-item-hint">课时：{{ item.lessonName }}</view>
          </view>
        </view>
        <!-- 加载状态提示 -->
        <view v-if="loading" class="loading-tip">加载中...</view>
        <view v-else-if="!hasMore && list.length > 0" class="loading-tip">没有更多了</view>
      </scroll-view>
      <view v-else class="list-nodata">
        <image class="nodata-icon" src="/static/images/nodata.png" mode="scaleToFill"></image>
        <text class="nodata-title">暂无课程，请加入课程</text>
      </view>
    </view>
  </view>
</template>

<script >
import { getAllExercise } from '@/api/course.js'
import { RESOURCE_URL } from '@/api/request.js'
import { formatTime as formatTimeUtil } from '@/utils/index.js'

export default {
  data() {
    return {
      list: [],
      page: 1,        // 当前页码
      limit: 10,      // 每页数量
      total: 0,       // 总数
      loading: false, // 加载状态
      hasMore: true   // 是否还有更多数据
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    async getList(loadMore = false) {
      if (this.loading) return
      this.loading = true
      try {
        const result = await getAllExercise({
          limit: this.limit,
          page: this.page
        })
        
        if (result.list) {
          result.list = result.list.map(item => {
            item.exerciseFiles.forEach(fileInfo => {
              if ((fileInfo.isPicture === 1 || fileInfo.isPicture === '1') && !item.videoPoster) {
                item.videoPoster = RESOURCE_URL + fileInfo.filePath
              }
            })
            return item
          })
          if (loadMore) {
            // 加载更多，追加数据
            this.list = [...this.list, ...result.list]
          } else {
            // 首次加载或刷新，替换数据
            this.list = result.list
          }
          
          this.total = result.total
          // 判断是否还有更多数据
          this.hasMore = this.list.length < this.total
        }
      } catch (e) {
        console.error('获取课程列表失败', e)
      } finally {
        this.loading = false
      }
    },
    getTagClass(item) {
      if (item.comprehensiveScore <= 59) {
        return 'ist-item-card-score-red'
      } else if (item.comprehensiveScore >= 59 && item.comprehensiveScore <= 69) {
        return 'ist-item-card-score-yellow'
      } else if (item.comprehensiveScore >= 69 && item.comprehensiveScore <= 85) {
        return 'ist-item-card-score-blue'
      } else if (item.comprehensiveScore >= 85 && item.comprehensiveScore <= 95) {
        return ''
      } else if (item.comprehensiveScore >= 95 && item.comprehensiveScore <= 100) {
        return ''
      }
    },
    // 滚动到底部触发
    handleScrollToLower() {
      if (!this.hasMore || this.loading) {
        return
      }
      
      // 加载下一页
      this.page++
      this.getList(true)
    },
    getContentStyle() {
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
      return {
        height: `calc(100% - ${(statusBarHeight + 44)}px)`
      }
    },
    handleGoReport(item) {
      uni.navigateTo({url: `/pages/course/follow/report/index?exerciseId=${item.exerciseId}`})
    },
    formatTime(seconds) {
      return formatTimeUtil(seconds)
    }
  }
}
</script>

<style lang="scss">
.course-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(207deg, #DCECFF 2%, #F6F7FB 61%);
}

.content {
  width: 100%;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
}

.course-list {
  height: calc(100% - 100rpx); /* 总高度 - tab高度 - 底部按钮区域 */
  overflow-y: auto;
}

.list-nodata{
  width: 100%;
  margin-top: 160rpx;
  display:flex;
  flex-direction: column;
  align-items: center;
  .nodata-icon{
    width: 450rpx;
    height: 336rpx;
  }
  .nodata-title{
    font-size: 28rpx;
    line-height: 44rpx;
    text-align: center;
    color: #999999;
  }
}

.list-item{
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 32rpx;
  .list-item-card{
    width: 276rpx;
    height: 190rpx;
    border-radius: 16rpx;
    overflow: hidden;
    // background: #F0F0F0;
    background: black;
    position: relative;
    .list-item-card-img{
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    .list-item-card-score{
      position: absolute;
      top: 0;
      left: 0;
      height: 60rpx;
      padding: 0 12rpx;
      background: #EBF8F0;
      border-radius: 16rpx 0rpx 16rpx 0rpx;
      .list-item-card-score-txt{
        color: #3DBA6D;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 60rpx;
      }
    }
    .list-item-card-score-red{
      background: #FFF2F0;
      .list-item-card-score-txt{
        color: #F02525;
      }
    }
    .list-item-card-score-yellow{
      background: #FFF8E6;
      .list-item-card-score-txt{
        color: #F28F15;
      }
    }
    .list-item-card-score-blue{
      background: #E6F3FF;
      .list-item-card-score-txt{
        color: #155BD4;
      }
    }
    .list-item-card-time{
      position: absolute;
      bottom: 8rpx;
      right: 8rpx;
      min-width: 84rpx;
      height: 40rpx;
      padding: 0 12rpx;
      border-radius: 40rpx;
      background: rgba(0, 0, 0, 0.6);
      .list-item-card-time-txt{
        color: rgba(255, 255, 255, 0.95);
        font-size: 24rpx;
        line-height: 40rpx;
      }
    }
  }
  .list-item-content{
    flex: 1;
    margin-left: 32rpx;
    .list-item-name{
      font-size: 28rpx;
      font-weight: 600;
      line-height: 44rpx;
      color: #333333;
      margin-top: 16rpx;
    }
    .list-item-time{
      font-size: 24rpx;
      line-height: 40rpx;
      color: #999999;
    }
    .list-item-hint{
      font-size: 24rpx;
      line-height: 40rpx;
      color: #999999;
    }
  }
}
.loading-tip {
  width: 100%;
  padding: 40rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #999999;
}
</style>
